<template>
    <div slot="content" class="tg_main_div">
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/enterprise/enterprise_list/' }">法律催收</el-breadcrumb-item>
                    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        基本信息
                    </div>
                    <div class="tg_test" style="height: 120px;border-top:2px solid #f4f4f5;">
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                订单编号：{{orderVO.orderNo}}
                            </el-col>
                            <el-col :span="6">
                                机构名称：{{orderVO.enterpriseName}}
                            </el-col>
                            <el-col :span="6">
                                订单金额：{{orderVO.amount}}
                            </el-col>
                            <el-col :span="6">
                                创建人员：{{orderVO.creater}}
                            </el-col>
                        </el-row>
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                经办律师：{{orderVO.oprer}}
                            </el-col>
                            <el-col :span="6">
                                订单状态：{{orderVO.orderStateName}}
                            </el-col>
                            <el-col :span="6">
                                创建时间：{{orderVO.dateCreated}}
                            </el-col>
                            <el-col :span="6">
                                审核时间：{{orderVO.auditingDate}}
                            </el-col>
                        </el-row>
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                交付时间：{{orderVO.payDate}}
                            </el-col>
                            <el-col :span="6">
                                结束时间：{{orderVO.endDate}}
                            </el-col>
                            <el-col :span="6">
                                退回时间：{{orderVO.backDate}}
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        合同信息
                    </div>
                    <div class="tg_test" style="height: 110px;border-top:2px solid #f4f4f5;">
                        <el-row v-if="orderVO.countMap" :gutter="30" style="margin: 10px 20px 10px 20px">
                            <el-col :span="3">
                                <tg-order-card :orderCount="stateTotal" describe="总数"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s0" describe="待审核"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s1" describe="未通过"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s2" describe="待制函"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s3" describe="待递送"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s4" describe="递送中"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="orderVO.countMap.s5" describe="已结束"></tg-order-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col class="warp-breadcrum" style="background-color: #FFFFFF">
                <contract-list :orderId="orderId"></contract-list>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import tgOrderCard from '@/components/card/TG_ORDER_CARD'
import oderAPI from '@/api/api_order'
import contractList from './contract_list'
export default {
    name: "enterprise_order_main",
    components: { tgOrderCard, contractList },
    data() {
        return {
            orderVO: {},
            orderId: '',
            stateTotal: 0
        }
    },
    methods: {
        count() {
          var count = 0
          const object = this.orderVO.countMap
          Object.keys(object).forEach( function(it) {
                count = count + object[it]
            }
          )
          this.stateTotal = count
        }
    },
    mounted() {
      const params = {
        orderId: this.orderId
      }
      oderAPI.getOrderDetails(params).then(res => {
        this.orderVO = res.data
        this.count()
      })

    },
    created() {
        this.orderId = this.$route.params.id
    }
}
</script>

<style scoped>
</style>